<template>
  <div class="questionnaire">
    <div style="position: relative;width: 100%">
      <img src="../assets/img/header.png" style="width: 100%;" />
      <div style="width: 100%;display: flex;justify-content: center; padding-bottom: 2.6667rem;       padding-left: 1rem;"
        class="contentBg">
        <div style="width: 7rem;margin: 1.0667rem 0;">
          <van-form @submit="onSubmit" @failed="onFailed" ref="vanFormRef">
            <van-cell-group inset style="background: transparent;">
               <div style="text-align: left;font-weight: bold;font-size: .64rem;margin: .2667rem 0;">
                一、满意度评价</div>
              <div>
                <div
                  style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                  财务部</div>
                <van-field class="zdyField" required name="financeData" label="数据完整准确性(财务部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.financeData">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="financeAnalysis" label="问题精准性及剖析深度(财务部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.financeAnalysis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="financeEmphasis" label="重点突出程度(财务部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.financeEmphasis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="financeGuidance" label="对后续工作的指导性(财务部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.financeGuidance">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
              </div>
              <div>
                <div
                  style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                  市场部</div>
                <van-field class="zdyField" required name="marketData" label="数据完整准确性(市场部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.marketData">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="marketAnalysis" label="问题精准性及剖析深度(市场部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.marketAnalysis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="marketEmphasis" label="重点突出程度(市场部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.marketEmphasis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="marketGuidance" label="对后续工作的指导性(市场部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.marketGuidance">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
              </div>
              <div>
                <div
                  style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                  政企部</div>
                <van-field class="zdyField" required name="governmentData" label="数据完整准确性(政企部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.governmentData">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="governmentAnalysis" label="问题精准性及剖析深度(政企部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.governmentAnalysis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="governmentEmphasis" label="重点突出程度(政企部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.governmentEmphasis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="governmentGuidance" label="对后续工作的指导性(政企部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.governmentGuidance">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
              </div>
              <div>
                <div
                  style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                  网络部</div>
                <van-field class="zdyField" required name="networkData" label="数据完整准确性(网络部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.networkData">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="networkAnalysis" label="问题精准性及剖析深度(网络部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.networkAnalysis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="networkEmphasis" label="重点突出程度(网络部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.networkEmphasis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="networkGuidance" label="对后续工作的指导性(网络部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.networkGuidance">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
              </div>
              <div>
                <div
                  style="font-size: .5333rem; margin: .2667rem 0; background: #325FFF;padding: .1333rem 1.6rem;display: inline-block; color: #fff;font-weight: bold; border-radius: .5333rem;margin-right:.5rem;">
                  品管部</div>
                <van-field class="zdyField" required name="qualityData" label="数据完整准确性(品管部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.qualityData">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="qualityAnalysis" label="问题精准性及剖析深度(品管部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.qualityAnalysis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="qualityEmphasis" label="重点突出程度(品管部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.qualityEmphasis">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
                <van-field class="zdyField" required name="qualityGuidance" label="对后续工作的指导性(品管部)"
                  :rules="[{ required: true, message: '请选择' }]">
                  <template #input>
                    <div>
                      <van-radio-group v-model="formState.qualityGuidance">
                        <van-radio name="0">非常满意</van-radio>
                        <van-radio name="1">满意</van-radio>
                        <van-radio name="2">一般</van-radio>
                        <van-radio name="3">不满意</van-radio>
                        <van-radio name="4">非常不满意</van-radio>
                      </van-radio-group>
                    </div>
                  </template>
                </van-field>
              </div>
              <div style="text-align: left;font-weight: bold;font-size: .64rem;margin: .2667rem 0;">
                三、其他支撑需求</div>
              <div>
                <van-field class="zdyField" v-model="formState.supportRequest1" label="支撑需求1：" type="textarea"
                  placeholder="请输入支撑需求" rows="5" autosize />

                <van-field class="zdyField" v-model="formState.supportRequest2" label="支撑需求2：" type="textarea"
                  placeholder="请输入支撑需求" rows="5" autosize />
              </div>
              <div style="margin: .4267rem;width: 80%;" >
                <van-button round block type="primary" native-type="submit">
                  提交
                </van-button>
                
              </div>
            </van-cell-group>
          </van-form>
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showPopup" position="bottom">
    <van-picker show-toolbar title="选择区县" :columns="county" @cancel="onCancel" @confirm="onConfirm" />
  </van-popup>
</template>

<script setup>
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { addQuestionnaire } from "../api/user"
import { ref, toRaw } from "vue";
import { debounce} from "../utils/index"
const showPopup = ref(false)
const router = useRouter();
const county = ref([
  '宝塔区',
  '安塞区',
  '子长市',
  '延长县',
  '延川县',
  '志丹县',
  '吴起县',
  '甘泉县',
  '富县',
  '洛川县',
  '宜川县',
  '黄龙县',
  '黄陵县',
])
const formState = ref({
  //基础数据
  district: undefined,
  frequency: undefined,

  //财务部
  financeData: undefined,
  financeAnalysis: undefined,
  financeEmphasis: undefined,
  financeGuidance: undefined,
  //市场部
  marketData: undefined,
  marketAnalysis: undefined,
  marketEmphasis: undefined,
  marketGuidance: undefined,
  //政企部
  governmentData: undefined,
  governmentAnalysis: undefined,
  governmentEmphasis: undefined,
  governmentGuidance: undefined,
  //网络部
  networkData: undefined,
  networkAnalysis: undefined,
  networkEmphasis: undefined,
  networkGuidance: undefined,
  //品管部
  qualityData: undefined,
  qualityAnalysis: undefined,
  qualityEmphasis: undefined,
  qualityGuidance: undefined,
  //
  supportRequest1: undefined,
  supportRequest2: undefined
})
function onConfirm(value, index) {
  formState.value.district = value
  showPopup.value = false
}
function onCancel() {
  Toast('取消');
  showPopup.value = false
}
// 表单提交
const onSubmit = debounce(()=>{
    handleAdd()
  },1000)
const onFailed = (errorInfo) => {
  Toast.fail('提交失败,完善信息')
  console.log('failed', errorInfo);
}

const handleAdd = async () => {
  return new Promise(async (resolve, reject) => {
    addQuestionnaire({ ...formState.value }).then(res => {
      router.push({
        path: "/questionnaire"
      })
    })
  })
}
</script>

<style scoped>
.questionnaire {
  width: 100%;
}

.van-cell-group {
  margin: 0;
}

.zdyField {
  flex-direction: column;
}

::v-deep(.zdyField .van-cell__title, .van-cell .van-cell__title) {
  width: 100% !important;
  color: #315FFF;
  font-size: .4267rem;
  margin-bottom: .1333rem;

}

::v-deep(.cField .van-cell__title) {
  background: transparent;
  color: #315FFF;
  font-size: .4267rem;


}

.cField,
.zdyField,
.van-cell {
  background: transparent !important;
}

::v-deep(.van-radio-group) {
  display: flex;
  flex-direction: column;
  gap: .1867rem;
}

.contentBg {
  background-image: url("../assets/img/contentBg.png");
  background-size: 100% 100%;
}

/* ::v-deep(.zdyField .van-field__body){
  border: .0533rem solid #F0F3F4;
  padding: .08rem;
} */
</style>
